[#ftl]
[@define "agile.chart.Triangle"  "agile._Component,agile._Resizable" ]		
widgetName:"Triangle"
[#assign templateString][#compress] 		
<div class='agileComponent agileTriangle'>
<div data-dojo-attach-point="line1" style="width:100%;height:1px;background-color:#808080;position:absolute;left:0px;top:{style.height};transform-origin:left top;transform:rotate(-{parameters.angle1}deg);border:0px" ></div>
<div data-dojo-attach-point="line2" style="width:calc(1 * 100%);height:1px;background-color:#808080;position:absolute;left:0px;top:{style.height};transform-origin:right bottom;transform:rotate({parameters.angle2}deg);border:0px" ></div>
<div data-dojo-attach-point="line3" style="width:100%;height:1px;background-color:#808080;position:absolute;left:0px;top:{style.height};border:0px" ></div>
</div>
[/#compress][/#assign]
,templateString:"${templateString?js_string}"	
,resizeAxis:"x"
[#assign ouput]	
	<div style="position:absolute;left:{style.left};top:{style.top};height:{style.height};width:{style.width}">
	<div style="position:absolute;width:100%;height:1px;background-color:#808080;left:0px;top:{style.height};transform-origin:left top;transform:rotate(-{parameters.angle1}deg);border:0px" ></div>
	<div style="position:absolute;width:100%;height:1px;background-color:#808080;left:0px;top:{style.height};transform-origin:right bottom;transform:rotate({parameters.angle2}deg);border:0px" ></div>
	<div style="position:absolute;width:100%;height:1px;background-color:#808080;left:0px;top:{style.height};border:0px" ></div>
	</div>
[/#assign]	
,templateMap:{
	dojo:"${ouput?js_string}"
	,agile:"<div data-dojo-type='{declaredClass}' data-dojo-props='{style-props}'>{innerWidets}</div>"
}	
,attributes:agile.delegate(agile._Component.prototype.attributes,{
	"length":lang.mixin({},agile.NumberMetadata,{
		onValueChange:function(widget,name,value){
			widget.metadata("parameters.length",value);
			widget.metadata("style.width",value);
			widget.resize();
		}
	})
	,"angle1":lang.mixin({},agile.NumberMetadata,{
		onValueChange:function(widget,name,value){			
			if( widget.metadata("parameters.angle2") + value >= 180){
				//alert("invalid")
			}else{			
				widget.metadata("parameters.angle1",value);
				widget.resize();
			}
		}
	})
	,"angle2":lang.mixin({},agile.NumberMetadata,{
		onValueChange:function(widget,name,value){		
			
			if( widget.metadata("parameters.angle1") + value >= 180){
				//alert("invalid")
			}else{			
				widget.metadata("parameters.angle2",value);
				widget.resize();
			}			
		}
	})
})	
,styleConstraints:agile.delegate(agile._Component.prototype.styleConstraints,{
	//"border-radius":lang.mixin({},agile.MetadataConstraint,{ignore:function(ownerWidget,sourceType){ return this._ignore || sourceType == "agile";}})
})
,initDefaultMetadata:function(){
//		this.metadata("parameters.radius",50);
	this.metadata("style.width","200px");
	this.metadata("style.height","173px");
	
	this.metadata("parameters.length",200);
	this.metadata("parameters.height",173);
	this.metadata("parameters.angle1",60);
	this.metadata("parameters.angle2",60);
}
,resize:function(){
	var length = this.metadata("parameters.length");
	var angle1 = this.metadata("parameters.angle1");
	var angle2 = this.metadata("parameters.angle2");
		
	style.set(this.line1,{"transform":lang.replace("rotate(-{0}deg)",[angle1])});
	style.set(this.line2,{"transform":lang.replace("rotate({0}deg)",[angle2])});
	//TODO:calculate the length for line1 and line2
	
}	
,getResizableTargetContainer:function(){				
	return this.domNode;		 
}
,toHtml:function(params){
//	console.log("@@@@@@params:",params);
	if(params.sourceType == "dojo"){
		return lang.replace(this.templateMap["dojo"],this.metadata());
	}
	
	return this.inherited(arguments);
}
[/@]
